<template>
	<div class="immediately-customization" @click="closeCustomExplain">
		<form class="customization-content" @click.stop="">
			<div class="form-group">
				<div class="label">
					如何称呼您
				</div>
				<input type="text" class="input-box" placeholder="姓名" v-model="params.member_true_name" />
			</div>
			<div class="form-group">
				<div class="label">
					联系方式
				</div>
				<input type="number" class="input-box" placeholder="手机号" v-model="params.member_mobile" />
			</div>
			<div class="form-group">
				<div class="tip">
					私宴定制专员会在一小时内联系您，请耐心等待。
				</div>
			</div>
			<div class="form-group">
				<div class="go-make" @click="toMake">
					<span>立即定制</span>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import { Toast } from 'mint-ui';
	import judge from "@/config/judge"
	export default {
		data() {
			return {
				arr: [{
					title: "什么是主题宴会",
					content: "根据您的需求，提供桌面、花卉及环境布置，打造专属的就餐气氛，提供一体化就餐服务"
				}, {
					title: "我们能提供",
					content: "发布会客户宴请、纪念日、寿庆祝派对、冷餐会、下午茶、开业宴请、年会等。"
				}, {
					title: "场地可选",
					content: "您可以自选提供场地，也可以用yami场地进行定制"
				}],
				params: {
					member_id: 101076,
					member_true_name: null,
					member_mobile: null,
					openid: "oGEpG4-UFfHoa_EXCuryj31Z20-Y"
				}
			}
		},
		mounted() {

		},
		methods: {
			...mapActions(['applyCustomiztion']),
			closeCustomExplain(event) {
				this.$emit("hideImmediatelyCustomization", false)
			},
			toMake() {
				if(this.params.member_true_name == null || this.params.member_truename == "") {
					Toast("联系人姓名不能为空");
					return;
				}
				if(this.params.member_mobile == null || this.params.member_mobile == "") {
					Toast("联系方式不能为空");
					return;
				}
				if(!judge.isValidPhone(this.params.member_mobile)) {
					Toast("手机号码不正确")
					return;
				}
				this.applyCustomiztion(this.params);
				this.closeCustomExplain()
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.immediately-customization {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
		.customization-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 40px 60px 85px;
			background-color: rgba(255, 255, 255, 1);
			z-index: 1911;
			.form-group {
				padding-top: 40px;
				.label {
					margin-bottom: 28px;
					font-size: 40px;
					color: #4A4A4A;
				}
				.input-box {
					box-sizing: content-box;
					border: none;
					display: block;
					padding: 20px 30px;
					height: 42px;
					line-height: 42px;
					color: #c4c4c4;
					font-size: 30px;
					background-color: #f8f8f8;
					border-radius: 8px;
					width: calc(100% - 60px);
				}
				.tip {
					font-size: 30px;
					color: #9B9B9B;
					line-height: 42px;
				}
				.go-make {
					width: 632px;
					height: 90px;
					margin: 0 auto;
					background-color: #B39B7C;
					border-radius: 8px;
					box-shadow: 0 10px 10px 0 rgba(176, 152, 122, 0.2);
					text-align: center;
					line-height: 90px;
					color: #fff;
					font-size: 36px;
					margin-bottom: 84px;
				}
			}
		}
	}
</style>